
<template>
  <n-layout has-sider position="absolute" style="top: 64px; bottom: 64px;">
    <n-layout-sider bordered content-style="padding: 24px;">
      <n-menu @update:value="handleUpdateValue" :options="menuOptions" />
    </n-layout-sider>
    <n-layout content-style="padding: 24px;" :native-scrollbar="false">
      <router-view></router-view>
    </n-layout>
  </n-layout>
  <n-global-style />
</template>

<script setup lang="ts">
import { ref } from 'vue';

// Route
import { useRouter } from 'vue-router'
const menuOptions = [
  {
    label: 'Python',
    key: 'python'
  },
  {
    label: 'C++',
    key: 'c++'
  },
  {
    label: 'JavaScript',
    key: 'javascript'
  },
]
const router = useRouter()
const handleUpdateValue = (key: string) => {
  console.log(key)
  router.push({
    path: `/tech/${key}`
  })
}
</script>

<style scoped>
.anchor-box {
  position: fixed;
  top: 100px;
  right: 15px;
}
.talk {
  margin: 20px;
}
.n-card {
  width: 200px;
  height: 300px;
  margin: 10px;
}
</style>